<template>
  <el-dialog :destroy-on-close="true" :lock-scroll="false" title="任务完成" :visible.sync="visible" width="800px"
             :before-close="onCancel">
    <el-form label-width="auto" :rules="rules" :model="form" ref="form">
      <el-form-item label="实际完成日期:" prop="complete_at">
        <el-date-picker v-model="form.complete_at" placeholder="选择实际完成日期" type="date"
                        :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd" style="width: 100%"/>
      </el-form-item>
      <el-form-item label="实际耗费工时:" prop="work_hour">
        <el-input-number v-model="form.work_hour" :min="0.5"  :step="0.5"></el-input-number>
      </el-form-item>
      <el-form-item label="备注:" prop="description">
        <el-input v-model="form.description" type="textarea" :rows="4"></el-input>
      </el-form-item>
      <el-form-item label="选择设备:" required>
        <el-transfer
          filterable
          :titles="['项目设备', '选中设备']"
          filter-placeholder="设备编号"
          v-model="form.product_ids"
          :data="options">
        </el-transfer>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="onSubmit">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {

  data() {
    return {
      start_at: '',
      pickerOptions: {
        disabledDate: (time) => {
          if (this.start_at) {
            return time.getTime() <= new Date(this.start_at).getTime() - 1000 * 24 * 60 * 60;
          } else {
            return false
          }
        }
      },
      project_id: '',
      id: '',
      loading: false,
      visible: false,
      options: [],
      rules: {
        complete_at: [{required: true, message: '请输入实际完成日期', trigger: 'blur'}],
        work_hour: [{required: true, message: '请输入实际耗费工时', trigger: 'blur'}],
      },
      form: {
        complete_at: null,
        work_hour: 0.5,
        product_ids: [],
        description: null
      },
    }
  },
  methods: {
    getProducts(type) {
      this.visible = true
      this.$http.get(`/projects/${this.project_id}/products?limit=999&type=${type}`).then(res => {
        this.loading = false
        if (res.data.code === 0) {
          this.options = res.data.data.map(({name, id, type}) => ({label: name, key: id, type}))
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    onActivate(row) {
      this.id = row.id
      this.project_id = row.project_id
      this.getProducts(row.type)
      this.start_at = row.start_at
    },
    onCancel() {
      this.form.product_ids=[]
      this.$refs.form.resetFields()
      this.visible = false
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.product_ids.length > 0) {
            this.handlePostForm()
          } else {
            this.$message.info('请绑定设备')
          }
        }
      })
    },
    handlePostForm() {
      this.loading = true
      this.$http.post(`/tasks/${this.id}/complete?`, this.form).then(res => {
        this.loading = false
        if (res.data.code === 0) {
          this.$message.success(res.data.msg)
          this.onCancel()
          this.$emit('reload')
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-transfer-panel {
  width: 232px;
}
</style>
